<template>
  <globle-dialog ref="globleDialogRef" :title="globleDialogConfig.title" :btn="globleDialogConfig.btn" @onBeforeColse="onBeforeColse">
    <div class="dialog-box">
      <img :src="nowUrl" style="object-fit: cover;">
      <!-- <el-avatar :size="230" fit="fill" :src="nowUrl" /> -->
      <div class="btn-box">
        <span>{{ userStore.userInfo.name }}</span>
        <!-- :on-progress="onProgress"  :on-success="onSuccess"  :auto-upload="false"  :http-request="onChangeAvatar"-->
        <el-upload ref="uploadRef" :action="api.file.changeAvatarUrl"  :show-file-list="false" :on-progress="onProgress" :on-success="onSuccess"
           :data="avatarParams" accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PNG" :limit="1" :headers="headers">
           <!-- <el-tooltip popper-class="popver" effect="dark" content="Top Center prompts info" placement="top">
              <el-icon><RefreshRight /></el-icon>
            </el-tooltip> -->
          <el-button icon="RefreshRight">更换头像</el-button>
        </el-upload>
      </div>
    </div>
  </globle-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useAPI } from '../../request/api';
import { ElMessage, UploadFile } from 'element-plus';
import { APIData, IAvatarParams } from '../../type';
import { useUserStore } from '../../store/user';
import { computed } from 'vue';

let currentRole = '';
let headers = {'token': localStorage.getItem('token')}
const api = useAPI();
const userStore = useUserStore();
const uploadRef = ref();
const nowUrl = ref('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png')  //默认头像
const globleDialogRef = ref();
const globleDialogConfig = { title: '我的头像', btn: { isShowBtn: false }, };

const open = () => {
  globleDialogRef.value.isShowDialog = true;
  // currentUserInfo.value = userStore.userInfo;
  if (userStore.userInfo.avatarUrl) nowUrl.value = userStore.userInfo.avatarUrl;
  currentRole = userStore.role;
  // console.log(role, userInfo);
}

const avatarParams = computed(() => {
    if(currentRole == 'teacher') return { role: 'teacher', userId: userStore.userInfo.workId };
    else if(currentRole == 'student') return { role: 'student', userId: userStore.userInfo.studentId };
    console.log(currentRole,"computed");
})

// const onChangeAvatar = async () => {
//   ElMessage.success('更换头像中');
//   let params = {} as IAvatarParams;
//   if(currentRole == 'teacher') params = { role: 'teacher', userId: currentUserInfo.value.workId };
//   if(currentRole == 'student') params = { role: 'student', userId: currentUserInfo.value.studentId };
//   const res: APIData = await api.file.changeAvatar(params);
//   if(res.code == 200 && res.data.url) {
//     nowUrl.value = res.data.url;
//     ElMessage.success('头像更换成功');
//   }else ElMessage.error(`${res.message}`);
// }

//上传进行
const onProgress = (evt: any, uploadFile: UploadFile) => {
  // ElMessage.success('更换头像中');
};
//上传完成
const onSuccess = (response: APIData, uploadFile: UploadFile) => {
  if (response.code == 200 && response.data.url) {
    nowUrl.value = response.data.url;
    userStore.$patch(states => {
      states.userInfo.avatarUrl = response.data.url;
    })
    uploadRef.value.clearFiles();
    ElMessage.success('头像更换成功');
  } else {
    uploadRef.value.clearFiles();
    ElMessage.error(`${response.message}`);
  }
};

const onBeforeColse = () => {
  globleDialogRef.value.isShowDialog = false;
}

defineExpose({ open })
</script>

<style scoped lang="scss">
.dialog-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  // border: 2px solid red;

  img {
      width: 240px;
      height: 240px;
      border-radius: 120px;
    }

  .btn-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    // border: 2px solid green;
    
    span {
      font-size: 26px;
      // font-weight: 400;
      letter-spacing: 2px;
      margin-bottom: 14px;
    }
  }
}
</style>